/*动画-start*/
.ioc_animated {
  animation-duration: 1s !important;
  -webkit-animation-duration: 1s !important;
  animation-fill-mode: both !important;
  -webkit-animation-fill-mode: both !important;
}

/*逐渐显示*/

.toShow(@time,@delay) {
  position: absolute;
  animation: toShow @time @delay;
  animation-fill-mode: both !important;
  -webkit-animation-fill-mode: both !important;
}
.toShow {
  .toShow(1.5s, 0.5s);
}
.toHide(@time,@delay) {
  position: absolute;
  animation: toHide @time @delay;
  animation-fill-mode: both !important;
  -webkit-animation-fill-mode: both !important;
}

/* 放大效果*/
.enlarge {
  animation-name: enlarge;
  -webkit-animation: enlarge;
}

/* 伸缩*/
.stretch_all {
  // overflow: hidden;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

/*从上到下进入*/
.fadeInDownTop {
  animation-name: fadeInDownTop;
  -webkit-animation: fadeInDownTop;
}
.fadeOutDownTop {
  animation-name: fadeOutDownTop;
  -webkit-animation: fadeOutDownTop;
}

/*从下到上进入*/
.fadeInUpLeft {
  animation-name: fadeInUpLeft;
  -webkit-animation: fadeInUpLeft;
}

/*从右到左进入*/
.fadeInRight0 {
  animation-name: fadeInRight0;
  -webkit-animation: fadeInRight0;
}

.fadeOutRight0 {
  animation-name: fadeOutRight0;
  -webkit-animation: fadeOutRight0;
}
.fadeInRight2 {
  animation-name: fadeInRight2;
  -webkit-animation: fadeInRight2;
}

.fadeOutRight2 {
  animation-name: fadeOutRight2;
  -webkit-animation: fadeOutRight2;
}

/*从左到右进入*/
.fadeInLeft0 {
  animation-name: fadeInLeft0;
  -webkit-animation: fadeInLeft0;
}

.fadeOutLeft0 {
  animation-name: fadeOutLeft0;
  -webkit-animation: fadeOutLeft0;
}

/*中心旋转*/
.coreRotate {
  animation-name: coreRotate;
  -webkit-animation-name: coreRotate;
}

@keyframes toShow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes toShow {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes toHide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes toHide {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes enlarge {
  from {
    opacity: 0;
    -ms-transform: scale(0.1, 0.1);
    /* IE 9 */
    -webkit-transform: scale(0.1, 0.1);
    /* Safari */
    transform: scale(0.1, 0.1);
    /* 标准语法 */
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@-webkit-keyframes enlarge

/* Safari 与 Chrome */ {
  from {
    opacity: 0;
    -ms-transform: scale(0.1, 0.1);
    /* IE 9 */
    -webkit-transform: scale(0.1, 0.1);
    /* Safari */
    transform: scale(0.1, 0.1);
    /* 标准语法 */
  }

  to {
    opacity: 1;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

/*从上到下*/
@keyframes fadeInDownTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -500px, 0);
    transform: translate3d(-50%, -500px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

@-webkit-keyframes fadeInDownTop {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -500px, 0);
    transform: translate3d(-50%, -500px, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes fadeOutDownTop {
  from {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -500px, 0);
    transform: translate3d(-50%, -500px, 0);
  }
}

@-webkit-keyframes fadeOutDownTop {
  from {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -500px, 0);
    transform: translate3d(-50%, -500px, 0);
  }
}

/*从左下到右上*/
@keyframes fadeInUpLeft {
  from {
    opacity: 0;
    -webkit-transform: translate(-1000px, 1000px);
    /* Safari */
    transform: stranslate(-1000px, 1000px);
    /* 标准语法 */
  }

  to {
    opacity: 1;
    -webkit-transform: translate(0, 10px);
    /* Safari */
    transform: stranslate(0, 10px);
    /* 标准语法 */
  }
}

@-webkit-keyframes fadeInUpLeft

/* Safari 与 Chrome */ {
  from {
    opacity: 0;
    -webkit-transform: translate(-1000px, 1000px);
    /* Safari */
    transform: stranslate(-1000px, 1000px);
    /* 标准语法 */
  }

  to {
    opacity: 1;
    -webkit-transform: translate(0, 10px);
    /* Safari */
    transform: stranslate(0, 10px);
    /* 标准语法 */
  }
}

/*从右到左进入*/
@keyframes fadeInRight0 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@-webkit-keyframes fadeInRight0 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes fadeOutRight0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
  }
}

@-webkit-keyframes fadeOutRight0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, -50%, 0);
    transform: translate3d(100%, -50%, 0);
  }
}


@keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes fadeInRight2 {
  0% {
    opacity: 0;
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeOutRight2 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

@-webkit-keyframes fadeOutRight2 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(1000px);
    transform: translateX(1000px);
  }
}

/*从左到右进入*/
@keyframes fadeInLeft0 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@-webkit-keyframes fadeInLeft0 {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

@keyframes fadeOutLeft0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
  }
}

@-webkit-keyframes fadeOutLeft0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, -50%, 0);
    transform: translate3d(-100%, -50%, 0);
  }
}

/*绕中心旋转*/
@keyframes coreRotate {
  5% {
    transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    /* IE 9 */
    -webkit-transform: rotate(5deg);
    /* Safari and Chrome */
  }

  30% {
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }

  60% {
    transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
  }

  90% {
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }
}

@-webkit-keyframes coreRotate {
  5% {
    transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    /* IE 9 */
    -webkit-transform: rotate(5deg);
    /* Safari and Chrome */
  }

  30% {
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }

  60% {
    transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
  }

  90% {
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
  }
}

/*动画-end*/

.turnAround(@time) {
  width: 100px;
  height: 100px;
  background: aqua;
  animation: turn @time linear infinite;
  margin: 100px auto;
}

@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }

  25% {
    -webkit-transform: rotate(90deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
  }

  75% {
    -webkit-transform: rotate(270deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}




.text_animate {
  padding-left: 20px;
  display: inline-block;
  white-space: nowrap;
  animation: 20s wordsLoop linear infinite normal;
}

@keyframes wordsLoop {
  0% {
      transform: translateX(0);
      -webkit-transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
  }
}

@-webkit-keyframes wordsLoop {
  0% {
      transform: translateX(0);
      -webkit-transform: translateX(0);
  }
  100% {
      transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
  }
}